<template>
  <div class="ek-page">
    <el-tabs v-model="code" class="config-tabs" @tab-click="handleClick">
      <el-tab-pane label="微信转账" name="wechat">
       <PayTransferWechat v-if="code == 'wechat'" />
      </el-tab-pane>
      <el-tab-pane label="支付宝转账" name="alipay">
       <PayTransfeAlipay   v-if="code == 'alipay'"/>
      </el-tab-pane>
      <el-tab-pane label="银行转账" name="bank">
        <PayTransferBank   v-if="code == 'bank'"/>
      </el-tab-pane>
     
      
    </el-tabs>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekTip from "@/components/business/ekTip/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";

import PayTransfeAlipay from "./PayTransfeAlipay.vue";
import PayTransferBank from "./PayTransferBank.vue";
import PayTransferWechat from "./PayTransferWechat.vue";

import { getDimensionByCode } from "@/utils/sys.js";
 
defineComponent({
  name: "config-index",
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;
const code = ref("wechat");

const handleClick = (tab, event) => {
  code.value = tab.props.name;
};


</script>
<style scoped lang="scss">
.ek-page {
  background-color: #fff;
  border-radius: 8px;;
  height: auto;
  padding: 0px 0 20px; 
}
.config-tabs {
  padding: 0 10px;
}
</style>
